<template>
  <common-detail-list title="详情">
    <el-button slot="header" @click="back">返回</el-button>
    <common-list slot="content">
      <div class="url-detail-content">
        <common-tabs slot="tabs" @tab-click="tabChange" v-model="info">
          <el-tab-pane label="请求头" name="requestHeaders">
            <common-json-view
              v-if="infoRow.requestHeaders && isJSON(infoRow.requestHeaders)"
              :json="JSON.parse(infoRow.requestHeaders)"
            ></common-json-view>
            <div v-else>{{ infoRow.requestHeaders }}</div>
          </el-tab-pane>
          <el-tab-pane label="请求体" name="requestBody"
            ><common-json-view
              v-if="infoRow.requestBody && isJSON(infoRow.requestBody)"
              :json="JSON.parse(infoRow.requestBody)"
            ></common-json-view>
            <div v-else>{{ infoRow.requestBody }}</div>
          </el-tab-pane>
          <el-tab-pane label="响应头" name="responseHeaders"
            ><common-json-view
              v-if="infoRow.responseHeaders && isJSON(infoRow.responseHeaders)"
              :json="JSON.parse(infoRow.responseHeaders)"
            ></common-json-view>
            <div v-else>{{ infoRow.responseHeaders }}</div></el-tab-pane
          >
          <el-tab-pane label="响应体" name="responseBody"
            ><common-json-view
              v-if="infoRow.responseBody && isJSON(infoRow.responseBody)"
              :json="JSON.parse(infoRow.responseBody)"
            ></common-json-view>
            <div v-else>{{ infoRow.responseBody }}</div></el-tab-pane
          >

          <el-tab-pane label="敏感详情" name="responseSensitive">
            <el-form label-width="80px" v-model="infoRow.sensitiveDetail">
              <el-row>
                <el-col :span="24"
                  ><el-form-item
                    label="识别规则："
                    prop="interfaceSensitiveRule"
                  >
                    <span style="color: #fd0000">
                      {{ infoRow.interfaceSensitiveRule }}</span
                    ></el-form-item
                  ></el-col
                >
              </el-row>

              <el-row>
                <el-col :span="24"
                  ><el-form-item label="数据分级：" prop="interfaceDataLevel">
                    {{ infoRow.interfaceDataLevel }}</el-form-item
                  ></el-col
                >
              </el-row>

              <el-row>
                <el-col :span="24"
                  ><el-form-item label="数据分类：" prop="interfaceDataType">
                    {{ infoRow.interfaceDataType }}</el-form-item
                  ></el-col
                >
              </el-row>

              <el-row>
                <el-col :span="24"
                  ><el-form-item label="重要数据：" prop="interfaceDataTag">
                    {{ infoRow.interfaceDataTag }}</el-form-item
                  ></el-col
                >
              </el-row>
              <el-row>
                <el-col :span="24"
                  ><el-form-item label="核心数据：" prop="interfaceCoreData">
                    {{ infoRow.interfaceCoreData }}</el-form-item
                  ></el-col
                >
              </el-row>
            </el-form>
          </el-tab-pane>
        </common-tabs>
      </div>
    </common-list>
  </common-detail-list>
</template>

<script>
import { isJSON } from "@/utils/util";

export default {
  data() {
    return { info: "" };
  },

  props: {
    infoRow: {
      type: Object,
      default: {},
    },
  },

  created() {
    this.info = "requestHeaders";
  },
  methods: {
    isJSON(str) {
      return isJSON(str);
    },
    tabChange() {},
    back() {
      this.$emit("close");
    },
  },
};
</script>

<style lang="scss" scoped>
.url-detail-content {
  ::v-deep .el-tabs__content {
    font-size: 13px;
    overflow-y: scroll;
    // padding: 10px;
    word-break: break-all;
  }
  ::v-deep .el-tabs__item {
    font-size: 13px;
  }
  ::v-deep .el-tabs__nav {
    margin-left: 10px;
  }
}
::v-deep .global-common-list-template-container {
  overflow-y: scroll;
}

::v-deep .global-base-list-container {
  padding: 0 0 18px 18px;
}

::v-deep .common-json-view-wrap {
  box-shadow: none;
}
::v-deep .el-tabs__item {
  padding: 0 60px 0 0 !important;
}
</style>
